<template>
	<view class="withdraw-list">
		<!-- 		<view class="search-title">
			<text>共{{ total }}条</text>
			<view class="screen" @click="">
				<text>筛选</text>
				<u-icon name="arrow-down-fill" color="#AAAAAA" size="20" class="icon"></u-icon>
			</view>
		</view> -->
		<view class="list-contain">
			<view class="list-contain-item" v-for="(item, index) in list" :key="secondKey('A',index)" @click="toDetail(item)">
				<view class="date">
					<view class="data flex-column">
						<view class="tag-box flex-space-between">
							<text class="title">{{ item.serialno }}</text>

							<span class="status" :style="{color: getColor(item.status)}">{{ item.status | changeServiceType }}</span>
						</view>
						<view class="content-box flex-space-between">
							<text class="left">原：{{ item.oriActiveName }}</text>

							<span class="right">新：{{ item.targetActiveName }}</span>
						</view>
						<view class="content-box flex-space-between">
							<text class="left">政策：{{ item.policyName }}</text>
						</view>
					</view>
					<view class="t-box flex-space-between">
						<span class="time">{{ item.addDate | timeForm }}</span>
					</view>
					<view class="error" v-if="item.status == 3">失败原因:{{ item.message }}</view>
				</view>
			</view>
		</view>

		<u-popup v-model="isScreen" mode="top" :border-radius="20">
			<div class="filter-body">
				<!-- <view class="f-title">筛选条件</view> -->

				<div class="filter-content">
					<u-field label="状态：" :disabled="true" v-model="queryParams.statusName" :label-width="170" input-align="left" placeholder="请选择" >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showStatusPicker = true"></text>
					</u-field>
					<u-field :disabled="true" label="产品政策：" :value="queryParams.policyName" input-align="left" :label-width="170" placeholder="请选择" >
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showPicker = true"></text>
					</u-field>

					<view class="duble-input flex-space-between">
						<text class="text">申请日期</text>
						<u-field
							label=""
							v-model="queryParams.startDate"
							:disabled="true"
							:label-width="0"
							:border-bottom="false"
							input-align="center"
							placeholder="请选择"
							@click="chooseTime('start')"
						></u-field>
						-
						<u-field
							:disabled="true"
							label=""
							:value="queryParams.endDate"
							:border-bottom="false"
							input-align="center"
							:label-width="0"
							placeholder="请选择"
							@click="chooseTime('end')"
						/>
					</view>
					<view class="duble-input flex-space-between">
						<text class="text">终端连号</text>
						<u-field label="" v-model="queryParams.serialnoStart" :label-width="0" :border-bottom="false" input-align="center" placeholder="请输入起始SN号"></u-field>
						-
						<u-field label="" v-model="queryParams.serialnoEnd" :border-bottom="false" input-align="center" :label-width="0" placeholder="请输入终止SN号" />
					</view>
				</div>
				<div class="footer-btn">
					<div class="btn-left"><button class="reset" size="large" type="warn" @click="resetHandle">重置</button></div>
					<div class="btn-right"><button class="myBtn" round size="large" @click="queryHandle">搜索</button></div>
				</div>
			</div>
		</u-popup>
		<u-picker
			title="申请状态"
			v-model="showStatusPicker"
			mode="selector"
			:range="changeServiceType"
			range-key="text"
			confirm-color="#4888FB"
			@confirm="onStatusConfirm"
			@cancel="showStatusPicker = false"
		/>
		<u-picker
			title="政策筛选"
			v-model="showPicker"
			mode="selector"
			:range="policyList"
			range-key="policyName"
			confirm-color="#4888FB"
			@confirm="onPolicyConfirm"
			@cancel="showPicker = false"
		/>
		<u-picker
			mode="time"
			v-model="timePicker"
			:default-time="defaultTime"
			:params="params"
			title="选择年月"
			@confirm="pickerConfirmHandle"
			start-year="2021"
			@cancel="timePicker = false"
			confirm-color="#4888FB"
		/>
		<uni-load-more :status="loadMore"></uni-load-more>
	</view>
</template>

<script>
import { changeServiceFeeHistory } from '_a/terminal';
import loadMoreData from '@/mixins/loadmore';
import { formDateToString, getCurrentMonthFirst1, getNowMonthNoDate, getCurrentYearFirst, getFormDate } from '_c/utils/date';
export default {
	mixins: [loadMoreData],
	data() {
		return {
			isScreen: false,
			queryParams: {
				startDate: '',
				endDate: '',
				pageNum: 1,
				pageSize: 20
			},
			loadMore: 1,
			list: [],
			showPicker: false,
			timePicker: false,
			showStatusPicker: false,
			total: '',
			chooseType: 'start', //选择时间类型
			params: {
				year: true,
				month: true,
				day: true,
				hour: false,
				minute: false,
				second: false
			},
			defaultTime: '',
			changeServiceType: [{ text: '申请中', value: '0' }, { text: '处理中', value: '1' }, { text: '修改完成', value: '2' }, { text: '修改失败', value: '3' }]
		};
	},
	computed: {
		policyList() {
			return this.$store.getters.policyList || [];
		}
	},
	onLoad() {
		this.getList();
	},
	filters: {
		timeForm(v) {
			// .slice(0, 10)
			return v;
		}
	},
	methods: {
		toDetail(item) {
			this.$storage.setStore('changeServiceDetailInfo', item);
			this.$nav.push({
				path: '/pages/home/policy/changeServiceInfo'
			});
		},
		onNavigationBarButtonTap(e) {
			this.isScreen = true;
		},
		getColor(status) {
			let str;
			switch (Number(status)) {
				case 0:
					str = 'gray';
					break;
				case 1:
					str = 'gray';
					break;
				case 2:
					str = 'green';
					break;
				case 3:
					str = 'red';
					break;
				default:
					break;
			}
			return str;
		},
		getList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				...this.queryParams
			};
			changeServiceFeeHistory(params).then(response => {
				let list = response.rows;
				this.total = response.total;
				this.loadMoreStatusDeal(list);
				if (list.length > 0) {
					this.list = this.list.concat(list);
				}
			});
		},
		reachBottomCallBack() {
			this.getList();
		},
		init() {
			this.$nextTick(() => {
				this.list = [];
			});
		},
		chooseTime(type) {
			this.timePicker = true;
			this.chooseType = type;
			if (type == 'start') {
				this.defaultTime = this.queryParams.startDate;
			} else {
				this.defaultTime = this.queryParams.entDate;
			}
		},
		onPolicyConfirm(e) {
			this.queryParams.policyCode = this.policyList[e[0]].policyCode;
			this.queryParams.policyName = this.policyList[e[0]].policyName;
			// this.chooseIndex = e[0];
		},
		onStatusConfirm(e) {
			this.queryParams.status = this.changeServiceType[e[0]].value;
			this.queryParams.statusName = this.changeServiceType[e[0]].text;
		},
		pickerConfirmHandle(item) {
			if (this.chooseType == 'start') {
				this.queryParams.startDate = `${item.year}-${item.month}-${item.day}`;
				this.queryParams.startDate = `${item.year}-${item.month}-${item.day}`;
			} else {
				this.queryParams.endDate = `${item.year}-${item.month}-${item.day}`;
			}
			this.timePicker = false;
		},
		// 重置
		resetHandle() {
			this.queryParams = {
				pageNum: 1,
				pageSize: 20
			};
		},
		// 搜索确定
		queryHandle() {
			this.$forceUpdate();
			this.init();
			this.pageNum = 1;
			this.list = [];
			this.getList();
			this.isScreen = false;
		},
		secondKey(first, second){
		    return `${first}_${second}`  
		}, 
	}
};
</script>

<style lang="scss">
.withdraw-list {
	margin: R(20);
}

.search-title {
	display: flex;
	justify-content: space-between;
	margin: R(20) 0;
}

.list-contain {
	background-color: #ffff;
	border-radius: R(10);

	&-item {
		// .title {
		// 	font-size: R(28);
		// 	// font-weight: 600;
		// }

		// .text {
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;

		// 	.price {
		// 		color: #AAAAAA;
		// 	}
		// }
		.date {
			padding: R(20) R(20) R(20);
			border-bottom: 1px solid #eee;
			.t-box {
				.time {
					height: R(44);
					line-height: R(44);
					// margin-top: R(10);
					text-align: center;
					// background: #f1f6f8;
					border-radius: R(22);
					font-size: R(26);
					font-weight: 400;
					color: #9b9999;
				}
			}

			.data {
				.content-box {
					margin: R(6) 0;
					font-size: R(26);
					.left {
					}
					.right {
					}
				}
				.tag-box {
					text-align: center;
					padding: R(0) 0;

					.num {
						font-size: R(36);
						margin-bottom: R(10);
						color: red;
					}

					.title {
						font-size: R(28);
						color: #666666;
					}

					.status {
						font-size: R(26);
					}
					.gray {
						color: gray;
					}
					.red {
						color: red;
					}
					.green {
						color: green;
					}
				}
			}

			.error {
				color: #f74949;
				font-size: R(24);
			}

			.name {
				font-size: R(26);
				margin-bottom: R(20);

				.me {
					position: relative;
					color: #f3e8a1;
					font-size: R(46);

					.font {
						position: absolute;
						left: R(20);
						top: R(10);
						font-size: R(20);
						color: #000;
					}
				}
			}

			.title {
				font-size: R(30);
				font-weight: bold;
				color: #1a1a1a;
			}
		}
	}
}

.search-box {
	margin: R(30);

	.title {
		text-align: center;
		font-weight: 400;
		font-size: R(30);
	}

	.open-time {
		display: flex;
		justify-content: space-between;

		&-box {
			display: flex;
		}
	}

	.bottom-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: R(30) 0;

		.btn {
			text-align: center;
			line-height: R(50);
		}
	}
}

.filter-body {
	padding: R(30);

	.f-title {
		font-size: R(30);
		text-align: center;
		font-weight: 400;
		color: #999;
	}
}

.filter-content {
	margin-bottom: R(30);

	.duble-input {
		border-bottom: 1px solid #eee;

		.text {
			width: R(140);
			white-space: nowrap;
			padding: 0 R(28);
		}
	}
}

.filter-body .footer-btn {
	display: flex;
	/*position: absolute;*/
	bottom: 0;
	width: 100%;
}

.filter-body .footer-btn .btn-left {
	width: 30%;
	margin-left: 15%;
}

.filter-body .footer-btn .btn-right {
	width: 30%;
	margin-left: 10%;
}

.filter-body .filter-tiem {
	margin-bottom: R(25);
}

.filter-body .filter-tiem .tit {
	font-size: R(32);
	color: #333;
}

.filter-body .filter-tiem .select-list .select-item {
	float: left;
	width: 33%;
	padding: R(20) R(10);
}

.icon-xiajiantou {
	font-size: R(24);
	margin-left: R(14);
}
</style>
